<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <link rel="stylesheet" type="text/css" href="../" />
  <link rel="stylesheet" href="./css/index.css" />
  <link rel="stylesheet" href="./css/vant.mini.css" />
  <style>
    .trainTicketstitle {
      background-image: linear-gradient(to right,
          rgb(13, 121, 131),
          rgb(25, 179, 182));
      color: #fff;
      height: 48px;
      font-size: 17px;
      line-height: 48px;
    }

    .left {
      text-align: center;
    }

    /* .left .left1 {
      position: absolute;
      left: 5rem;
      top: 12px;
    } */
    .left :nth-child(1) span {
      /* line-height: 24px; */
      color: #fff;
    }

    /* .text-corrector {
        padding: 2rem;
      } */
    .input-title {
      font-size: 1.4rem;
      color: #000;
    }

    .input-title span {
      display: inline-block;
      padding-bottom: 0.2rem;
      color: #3d9cff;
      font-size: 1.2rem;
      cursor: pointer;
    }

    .content {
      height: 24px;
      line-height: 24px;
    }

    .input-content .van-cell {
      padding: 0.5rem 1rem;
    }

    .input-content .van-field--min-height .van-field__control {
      height: 18rem;
    }

    .input-content {
      position: relative;
      /* margin-top: 1rem; */
      width: 100%;
      height: 22rem;
      border: 1px solid #ddd;
    }

    .ed-form-down {
      position: absolute;
      left: 2rem;
      bottom: 0.5rem;
    }

    .ed-form-down .ed-down-tips {
      font-size: 1.4rem;
      color: #999;
    }

    .ed-form-down .ed-down-tips-empty {
      color: #f03b35;
      font-size: 1.4rem;
    }

    .ed-form-down .ed-tips-in {
      margin: 0 2px;
      color: #ff851a;
    }

    .btn {
      text-align: center;
    }

    .result-content {
      position: relative;
      border: 1px solid #ddd;
      margin-top: 2rem;
      padding-bottom: 2.5rem;
    }

    .result-content .title {
      position: relative;
      font-size: 1.4rem;
      padding: 2rem;
      font-weight: 600;
    }

    .result-content .result {
      height: 20rem;
      padding: 0 1rem;
      color: #666;
      line-height: 2.4rem;
      font-size: 1.4rem;
      overflow-y: scroll;
    }

    .result-content .demo-result-tips {
      position: absolute;
      left: 1rem;
      bottom: 0.5rem;
      color: #999;
      font-size: 1.4rem;
    }

    .result-content .demo-result-tips .ed-tips-in {
      margin: 0 0.2rem;
      color: #ff851a;
    }
  </style>
</head>

<body>
  <div class="text-corrector" id="app">
    <div class="trainTicketstitle">
      <div class="arrow clearfix">
        <div class="left">
          <span class="left1" @click="home">
            <van-icon name="arrow-left" style="font-weight: 600" />
            <!-- <span>返回</span> -->
          </span>
          <!-- <van-icon name="arrow-left" /> -->
          <span style="font-weight: 600">文本纠错</span>
        </div>
      </div>
    </div>
    <div class="content">
      <div class="input-title">
        请输入一段想分析的文本：<span @click="getRandomText">随机示例</span>
      </div>
      <div class="input-content">
        <van-field v-model="value" type="textarea" maxlength="255" :border="true" style="height: 20rem"
          :clearable="true" />
        <div class="ed-form-down">
          <span class="ed-down-tips ed-down-tips-empty" v-if="!value">请输入中文文本</span>
          <span class="ed-down-tips" v-else>还可以输入<span class="ed-tips-in">{{ 255 - value.length }}</span>个字</span>
        </div>
      </div>
      <div class="btn">
        <van-button @click="getResult" style="margin-top: 2rem;background: #0E7677;
        box-shadow: 0px 16px 16px 0px rgb(4 124 137 / 5%);
        border-radius: 8px;
        color: #fff;
        font-weight: 600;" size="small">开始分析</van-button>
      </div>

      <div class="result-content">
        <div class="title">分析结果</div>
        <div class="result" ref="result"></div>
        <div class="demo-result-tips" v-if="resultCount">
          该文本中有<span class="ed-tips-in">{{ resultCount }}</span>处错别字，已修改和高亮显示
        </div>
        <div class="demo-result-tips" v-else>该文本中未发现有错误字</div>
      </div>
    </div>
  </div>
</body>
<script src="./js/vue.js"></script>
<script src="./js//vant.mini.js"></script>
<script src="./js/rem.js"></script>
<script src="./js/axios.mini.js"></script>
<script src="./js/jquery.mini.js"></script>
<script src="./js/utils.js"></script>
<script src="./js/mixin.js"></script>
<script>
  const api = "http://117.160.207.160:19090";
  // const api = "http://20.1.59.150:19000";
  let app = new Vue({
    el: "#app",
    mixins: [Mixin],
    data() {
      return {
        res: "adsasd",
        value: "",
        resultCount: "",
        spanList: [],
        indexList: [],
        total: 0,
        token: "",
        textList: [
          "他说我退休了有的是时间，我就这么学，把中里巴人《求医不如求己》一套四册书全都看完了。他还练会了八段锦。把一套《针灸大全》里的人体经络血位分布图，全背记下来了。",
          "她眼睛里坦荡清明的笑意像一百只毛绒绒的猫爪子",
          "汽车形式在这条隧道上",
          `搜浪人体会过创业的艰辛，深知成功的来之不易。面对新世纪的机遇与挑战，搜浪人将会以更热情、更饱满的精神面貌，为客户送去更优质的服务。“建立良好的信誉度、建立广泛和良好的合作关系”一直是我们的目标，而且实践证明，我们也是在一步一步、脚踏实地的按照这样做的。相信我们，我们有更好的发展能力和更强的竟争能力，让我们携手共进，共同把握互联网络信息化时代的无限商机！`,
          `日前，地球上的绿色之肺——森林正在一天天地委缩。近200年来，地球上的森林大约已有三分之一被采筏和毁掉；而另一方面，由于燃烧物增多，二氧化碳的排放量在巨烈增加。日前，地球上的绿色之肺——森林正在一天天地委缩。近200年来，地球上的森林大约已有三分之一被采筏和毁掉；而另一方面，由于燃烧物增多，二氧化碳的排放量在巨烈增加。`,
        ],
      };
    },
    methods: {
      getResult() {
        this.$refs.result.innerHTML = "";
        this.spanList = [];
        this.indexList = [];
        this.resultCount = "";
        this.total = 0;
        axios
          .post(`${api}/nlp/language/textFix?text=${this.value}`)
          .then((res) => {
            if (res.status === 200) {
              if (!res.data.item.vec_fragment.length) {
                this.$refs.result.innerHTML = res.data.text;
              } else {
                let text = res.data.text;
                this.resultCount = res.data.item.vec_fragment.length;
                Array.from(text).forEach((item) => {
                  this.spanList.push(`<span>${item}</span>`);
                });
                res.data.item.vec_fragment.forEach((item) => {
                  let list = getIndex(
                    res.data.text,
                    item.begin_pos,
                    item.end_pos
                  );
                  this.indexList.push({
                    startIndex: list[0],
                    endIndex: list[1],
                    correct: item.correct_frag,
                    ori: item.ori_frag,
                  });
                });
                this.handleList();
                this.$refs.result.innerHTML = this.spanList.join("");
              }
            } else {
              Notify({ type: "danger", message: "分析失败请重试" });
            }
          });
      },
      handleList() {
        let startIndex = this.indexList[0].startIndex;
        let endIndex = this.indexList[0].endIndex;
        let num = endIndex - startIndex + 1;
        // <span class="highlight">${this.indexList[0].ori}<span>${this.indexList[0].correct}</span></span>
        this.spanList.splice(
          startIndex,
          num,
          `<span class="highlight">${this.indexList[0].correct}</span>`
        );
        this.indexList.shift();
        if (this.indexList.length) {
          this.total = this.total + num - 1;
          this.indexList[0].startIndex =
            this.indexList[0].startIndex - this.total;
          this.indexList[0].endIndex =
            this.indexList[0].endIndex - this.total;
          this.handleList();
        }
      },
      getRandomText() {
        let maxNum = this.textList.length;
        let randomNum = Math.floor(Math.random() * maxNum);
        if (this.randomNum === randomNum) {
          this.getRandomText();
          return;
        }
        this.randomNum = randomNum;
        this.value = this.textList[randomNum];
        this.getResult();
      },
    },
    mounted() {
      this.getRandomText();
    },
  });
</script>

</html>